<template>
            <!--全部车型-->
            <div class="allcar" v-if="showcx">
                <ul>
                    <li v-for="v in carsList">
                        <div class="lst">
                            <div class="lstImg">
                                <img  v-lazy="v.img" width="100%" height="100%">
                            </div>
                            <div class="lstMsg">
                                <p style="font-size:0.9rem;color:#333;">{{v.carName}}</p>
                                <p style="font-size:0.75rem;">时间:{{v.time}}</p>
                                <p style="font-size:0.6rem;">地点:{{v.location}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--已经收藏-->
            <div class="allcar" v-else-if="showsc">
                <ul>
                    <li v-for="v in collect">
                        <div class="lst">
                            <div class="lstImg">
                                <img v-lazy="v.img" width="100%" height="100%">
                            </div>
                            <div class="lstMsg">
                                <p style="font-size:0.9rem;color:#333;">{{v.carName}}</p>
                                <p style="font-size:0.75rem;">时间:{{v.time}}</p>
                                <p style="font-size:0.6rem;">地点:{{v.location}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--车城优惠-->
            <div class="allcar" v-else-if="showyh">
                <ul>
                    <li v-for="v in discounts">
                        <div class="lst">
                            <div class="lstImg">
                                <img v-lazy="v.img" width="100%" height="100%">
                            </div>
                            <div class="lstMsg">
                                <p style="font-size:0.9rem;color:#333;">{{v.title}}</p>
                                <p style="font-size:0.75rem;">时间:{{v.time}}</p>
                                <p style="font-size:0.6rem;">地点:{{v.location}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
</template>

<script>
    // import BScroll from 'better-scroll'
    //import mui from 'static/js/mui'
    export default {
        data() { 
            return {
                //全部车型
                 carsList: [
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    },{
                        carName: '本田思域',
                        time:'2017-08-08',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=4067682988,2507817410&fm=27&gp=0.jpg'
                    }

                   
                ],
                //已经收藏
                collect: [
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    },
                    {
                        carName: '奔驰Gla',
                        time:'2017-11-11',
                        location:'环球港汽车城',
                        img: 'http://img2.imgtn.bdimg.com/it/u=3949304356,2620452740&fm=27&gp=0.jpg'
                    }
                ],
                //车城优惠
                discounts: [
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    },
                    {
                        title: '环球港盛大开业',
                        time:'2017-02-02',
                        location:'环球港汽车城',
                        img: 'http://img4.imgtn.bdimg.com/it/u=414537236,4104719316&fm=27&gp=0.jpg'
                    }
                ]
            } 
        },
        created(){},
        methods: {},
        //获取父组件传过来的数据
        props: ['showcx', 'showsc', 'showyh'],
        mounted() {
        },
        watch:{
        },
        computed: {}
    }

</script>

<style lang="scss" scoped>
    .allcar {
        width: 100%;
        padding: 10px 10px 50px 10px;
        .lst {
            width: 100%;
            height: 5rem;
            background: #fff;
            margin-bottom: 10px;
            overflow: hidden;
            .lstImg {
                width: 40%;
                float: left;
                height: 100%;
                backgroun: #fff;
                padding: 5px;
            }
            .lstMsg {
                width: 60%;
                float: left;
                height: 100%;
                backgroun: #fff;
                padding: 10px 5px 5px 5px;
                p {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
</style>